<! doctype html>
<html>
    <head>
        <meta name="theme-color" content="#000" />
        <meta name="viewport" content="user-scalable=no" >
        <meta name="apple-mobile-web-app-capable" content="yes" >
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>
        Panorama Toy
        </title>
    </head>
    <style>
        body{
            position: fixed;width: 100%;height: 100%; background-color: transparent; padding: 0px;display: block;
            border: 0px;margin: 0px auto;

        }
        .canvasContainer{
            position: fixed;width: 100%;height: 100%;z-index: 2; background-color: transparent; padding: 0px;display: block;
            border: 0px;margin: 0px auto;
        }
        #mainCanvas{
            position: fixed;width: 100%;height: 100%; object-fit: cover;object-position: bottom;z-index: 3; margin:0px;padding: 0px;display: block;border: 0px;
        }
        #copyrights{
            position: absolute; bottom: 15px; left: 15px;top: auto;right: auto;z-index: 4;display: block;
        }
        table{
            margin: 0 auto; font-size: 25; color: white; width: 50%; min-width: 700; font-family:sans-serif; text-align: center;text-shadow: 0px 0px 2px black,0px 0px 5px black,0px 0px 10px black,0px 0px 25px black,0px 0px 50px black;
        }
        #loadingTextures{
            position: absolute; margin: auto; top: 50%;left: 0;right: 0; z-index: 1;display: block;
        }
        #mainTitle{
            position: absolute; margin: auto; top: 50%;left: 0;right: 0; z-index: 1;display: none;
        }

    </style>
    <body onload="initGl();">
        <div class="canvasContainer" id="container">
            <div id="copyrights"><font color="gray">
                copyleft@三角龙Mitsunoryw<br />
                DomainName@cpolar<br/>
                Server@Aliyun&Gitee
            </font>
            </div>
            <div id="mainTitle">
              <center>
                <font color="gray">
                please click screen to allow Gyroscope for better experience
              </font>
              </center>
            </div>
            <div id="loadingTextures">
                <center>
                    <br />
                    <br />
                    <br />
                    <b>Please wait</b>
                    <br />
                    <b>Loading Textures... </b>
                </center>
            </div>
    <canvas id="mainCanvas" width='1920' height="1080">
        </canvas>
            <img id="textureImagefile" src="resources/texturesmin.png" width="0" height="0">
        </div>
        <script src="gl-matrix.js"></script>
        <script src="app.js"></script>
    </body>
</html>
